<template>
  <div class="wrap">
    <div class="old_phone">输入原手机号码</div>
    <div class="tip">请先完成身份校验</div>
    <up-form :label-style="{fontSize: '32rpx', color: 'rgba(0,0,0,0.85)', lineHeight: '44rpx'}" :model="form" label-width="100">
      <up-form-item border-bottom label="原手机号码">
        <up-input v-model="form.phone" border="none" maxlength="11" placeholder="请输入原手机号码" placeholder-class="placeholder" />
      </up-form-item>
    </up-form>
    <div class="question mt16" @tap="Router.push('phone_not_use')">手机号码不可用？</div>
    <div :style="keepBottomSafeDis()" class="suction_bottom_btn">
      <Button :disabled="!canCommit" size="L" @confirm="nextStepFn">下一步</Button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive } from 'vue'
import Button from '@C/Button.vue'
import { keepBottomSafeDis, Router } from '@U/common'

const form = reactive({
  phone: '',
})
const canCommit = computed(() => form.phone.length === 11)
const nextStepFn = () => {
  if (!canCommit.value) return
  Router.push('phone_change_1')
}
</script>

<style lang="less" scoped>
.wrap {
  padding: 80rpx 56rpx 0 66rpx;
  background-color: #fff;
  .old_phone {
    font-weight: 400;
    font-size: 48rpx;
    color: rgba(0,0,0,0.85);
    line-height: 66rpx;
  }
  .tip {
    font-weight: 400;
    font-size: 28rpx;
    color: rgba(0,0,0,0.45);
    line-height: 40rpx;
    margin-bottom: 58rpx;
  }
  /deep/ .placeholder {
    font-size: 32rpx !important;
    color: #BFBFBF;
    line-height: 44rpx;
  }
  .question {
    font-weight: 400;
    font-size: 28rpx;
    color: #1890FF;
    line-height: 40rpx;
  }
}
</style>
